<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
	<!-- CSS  -->
	<!-- 
	<link href="<c:url value="/resources/blueprint/screen.css" />" rel="stylesheet" type="text/css" />
	<link href="<c:url value="/resources/blueprint/ie.css" />" rel="stylesheet" type="text/css" />
	 -->
	<link href="<c:url value="/resources/jqueryui/1.8.9/css/overcast/jquery-ui-1.8.9.custom.css" />" rel="stylesheet" type="text/css" />
	<link href="<c:url value="/resources/jqgrid/css/ui.jqgrid.css" />" rel="stylesheet" type="text/css" />
	<link href="<c:url value="/resources/jquerylayout/1.3/layout.css" />" rel="stylesheet" type="text/css" />
	
	<!-- JS Library -->
	
	
	<script type="text/javascript" src="<c:url value="/resources/jquery/1.4/jquery.js" />"></script>
	<script type="text/javascript">
	 var jq = jQuery.noConflict();
	</script>
	<script type="text/javascript"	src="<c:url value="/resources/jqueryui/1.8.9/jquery-ui-1.8.9.custom.min.js" />"></script>

	<script type="text/javascript"	src="<c:url value="/resources/jquerylayout/1.3/jquery.layout.js" />"></script>

	<script type="text/javascript"	src="<c:url value="/resources/jqgrid/i18n/grid.locale-cn.js" />"></script>

	<script type="text/javascript"	src="<c:url value="/resources/jqgrid/jquery.jqGrid.min.js" />"></script>
	


</head>
<body>

<script type="text/javascript">

	jq(function() {
		jq("#grid").jqGrid({
		   	url:'/jxt/user',   //获取数据的URL地址
			datatype: 'json',			//从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
			mtype: 'GET',				//ajax提交方式。POST或者GET，默认GET
		   	colNames:['id', '登录名', '密码','用户名','Email','联系电话','groupName','state'], //	列显示名称，是一个数组对象。
		   	colModel:[					//对显示列属性的设置，是一个数组对象
		   		  //name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable  是否可以排序
		   		{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
		   		{name:'loginName',index:'loginName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
		   		{name:'password',index:'password', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
		   		{name:'name',index:'name', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
		   		{name:'email',index:'email', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
		   		{name:'tel',index:'tel', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
		   		{name:'groupName',index:'group_id', width:100,editable:false, editrules:{required:false}, editoptions:{size:10}},
		   		{name:'state',index:'state', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
		   	],
		   	postData: { 	//此数组内容直接赋值到url上，参数类型：{name1:value1…}
			},
			rowNum:10,		//在grid上显示记录条数，这个参数是要被传递到后台. 默认 0
		   	rowList:[5,10,15],	//一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台.默认[]
		   	height: 200,		//表格高度，可以是数字，像素值或者百分比 默认150
		   	autowidth: true,	//	如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度,默认false。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth
			rownumbers: true,	//如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'.默认false.
		   	pager: '#pager',	//定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置 .默认null
		   	sortname: 'id',		//默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台 默认"".
		    viewrecords: true,	//定义是否要显示总记录数 默认false.
		    sortorder: "asc",	//排序顺序，升序或者降序（asc or desc） 默认asc.
		    caption:"Users",	//表格名称
		     multiselect: true,  //是否显示多选  默认false
		    emptyrecords: "Empty records", //当返回的数据行数为0时显示的信息。只有当属性 viewrecords 设置为ture时起作用
		    loadonce: false,	////如果为ture则数据只从服务器端抓取一次，之后所有操作都是在客户端执行，翻页功能会被禁用.默认false
		    loadComplete: function() {
			},
		    jsonReader : {
				//描述json 数据格式的数组，参数是固定的,即必须有root,page,total,records
		        root: "rows",
		        page: "page",
		        total: "total",
		        records: "records",
		        repeatitems: false
		        //cell: "cell",
		        //id: "id"
		    }
		});
		
		jq("#grid").jqGrid('navGrid','#pager',
				{edit:false,add:false,del:false,search:true},
				{ },
		        { },
		        { }, 
				{ 
			    	sopt:['eq', 'ne', 'lt', 'gt', 'cn','nc', 'bw', 'ew','le','ge','bn','en'],
			        closeOnEscape: true,  //是否关联esc键 ,即Esc键是否可用
			        	multipleSearch: true, //开启多字段查询  重要
			         	closeAfterSearch: true}
		);
		
		jq("#grid").navButtonAdd('#pager',
				{ 	caption:"Add",  			//按钮名称，可以为空，string类型
					buttonicon:"ui-icon-plus", 	//按钮的图标，string类型，必须为UI theme图标
					onClickButton: addRow,		//按钮事件，function类型，默认null
					position: "last", 			//first或者last，按钮位置
					title:"", 					//string类型，按钮的提示信息
					cursor: "pointer"			//string类型，光标类型，默认为pointer
				} 
		);
		
		jq("#grid").navButtonAdd('#pager',
				{ 	caption:"Edit", 
					buttonicon:"ui-icon-pencil", 
					onClickButton: editRow,
					position: "last", 
					title:"", 
					cursor: "pointer"
				} 
		);
		
		jq("#grid").navButtonAdd('#pager',
			{ 	caption:"Delete", 
				buttonicon:"ui-icon-trash", 
				onClickButton: deleteRow,
				position: "last", 
				title:"", 
				cursor: "pointer"
			} 
		);

		jq("#btnFilter").click(function(){
			jq("#grid").jqGrid('searchGrid',
					{multipleSearch: false, 
						sopt:['eq']}
			);
		});

		// Toolbar Search
		//jq("#grid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch:"cn"});

	});
</script>
  

<script type="text/javascript">

function addRow() {

	// Get the currently selected row
    jq("#grid").jqGrid('editGridRow','new',
    		{ 	url: "/jxt/user/add", 
					editData: {
			    },
			    recreateForm: true,				//每次操作是否创建新的表单
			    beforeShowForm: function(form) {
			    },
				closeAfterAdd: true,			//添加模式时,添加记录后是否关闭对话框
				reloadAfterSubmit:false,		//操作完成后,是否重新加载数据 boolean true
				afterSubmit : function(response, postdata) 
				{ 
			        var result = eval('(' + response.responseText + ')');
					var errors = "";
					
			        if (result.success == false) {
						for (var i = 0; i < result.message.length; i++) {
							errors +=  result.message[i] + "<br/>";
						}
			        }  else {
			        	jq("#dialog").text('Entry has been added successfully');
						jq("#dialog").dialog( 
								{	title: 'Success',
									modal: true,
									buttons: {"Ok": function()  {
										jq(this).dialog("close");} 
									}
								});
	                }
			    	// only used for adding new records
			    	var new_id = null;
			    	
					return [result.success, errors, new_id];
				}
    		});

}

function editRow() {
	// Get the currently selected row
	var row = jq("#grid").jqGrid('getGridParam','selrow');
		
	if( row != null  ) 
		jq("#grid").jqGrid('editGridRow',row,
			{	url: "/jxt/user/edit", 
				editData: {
		        },
		        recreateForm: true,
		        beforeShowForm: function(form) {
		        },
				closeAfterEdit: true,
				reloadAfterSubmit:false,
				afterSubmit : function(response, postdata) 
				{ 
		            var result = eval('(' + response.responseText + ')');
					var errors = "";
					
		            if (result.success == false) {
						for (var i = 0; i < result.message.length; i++) {
							errors +=  result.message[i] + "<br/>";
						}
		            }  else {
		            	jq("#dialog").text('Entry has been edited successfully');
						jq("#dialog").dialog( 
								{	title: 'Success',
									modal: true,
									buttons: {"Ok": function()  {
										jq(this).dialog("close");} 
									}
								});
	                }
		        	
					return [result.success, errors, null];
				}
			});
	else jq( "#dialogSelectRow" ).dialog();
}

function deleteRow() {
	
	//获得多选选项
    var rows = jq("#grid").jqGrid('getGridParam','selarrrow'); 
	
	var len = rows.length;
	
	 if(rows != null ){
		jq("#grid").jqGrid( 'delGridRow', rows,
	          	{ url: '/jxt/user/delete', 
							recreateForm: true,
				            beforeShowForm: function(form) {
				              //change title
				              jq(".delmsg").replaceWith('<span style="white-space: pre;">' +
				            		  'Delete selected ' + len +'  record?' + '</span>');
							  //hide arrows
				              jq('#pData').hide();  
				              jq('#nData').hide();  
				            },
	          				reloadAfterSubmit:false,
	          				closeAfterDelete: true,
	          				afterSubmit : function(response, postdata) 
							{ 
				                var result = eval('(' + response.responseText + ')');
								var errors = "";
								
				                if (result.success == false) {
									for (var i = 0; i < result.message.length; i++) {
										errors +=  result.message[i] + "<br/>";
									}
				                }  else {
				                	jq("#dialog").text('Entry has been deleted successfully');
									jq("#dialog").dialog( 
											{	title: 'Success',
												modal: true,
												buttons: {"Ok": function()  {
													jq(this).dialog("close");} 
												}
											});
				                }
			                	// only used for adding new records
			                	var new_id = null;
			                	
								return [result.success, errors, new_id];
							}
	          	});
	}else{
		  jq( "#dialogSelectRow" ).dialog();
	}
		
	
}

</script>  
  
<p>JqGrid - Spring 3 MVC Integration Tutorial</p>
<div id="jqgrid">
	<table id="grid"></table>
	<div id="pager"></div>
</div>

<div id="dialog" title="Feature not supported" style="display:none">
	<p>That feature is not supported.</p>
</div>

<div id="dialogSelectRow" title="Warning" style="display:none">
	<p>Please select row</p>
</div>


</body>
</html>